<template>
    <div>
        <!--操作区域-->
        <div>
            <h3>字典信息</h3>
        </div>
        <!--表格显示区-->
        <div>
            <el-table :data="keyTable" style="width: 100%">
                <el-table-column prop="Id" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="Identify" label="标识" width="180">
                </el-table-column>
                <el-table-column prop="Name" label="字典名称" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" @click="jumpDetail(scope.row)">{{ scope.row.Name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="DicKeyParentId" label="父级ID" width="180">
                </el-table-column>
                <el-table-column prop="DicKey" label="键值信息" width="180">
                </el-table-column>
                <el-table-column prop="OrderSort" label="排序值" width="180">
                </el-table-column>
                <el-table-column prop="IsEnable" label="是否启用" width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.IsEnable == 0">启用</span>
                        <span v-if="scope.row.IsEnable == 1">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" label="备注" width="180">
                </el-table-column>
            </el-table>
        </div>
        <!--字典详情编辑区-->
        <el-dialog title="字典详情显示" :visible.sync="dicDetailVisable" width="1000px">
            <!--字典总表编辑区-->
            <!--字典详情显示区-->
            <el-table :data="Details" @selection-change="handleSelectionChange" @row-dblclick="dbRowClick" border
                style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="DicKeyId" label="数据源ID">
                </el-table-column>
                <el-table-column prop="DicText" label="字典项文本">
                    <template slot-scope="scope">
                        <el-input v-show="scope.row.show" v-model="scope.row.DicText"></el-input>
                        <span v-show="!scope.row.show">{{ scope.row.DicText }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="DicValue" label="字典值">
                    <template slot-scope="scope">
                        <el-input v-show="scope.row.show" v-model="scope.row.DicValue"></el-input>
                        <span v-show="!scope.row.show">{{ scope.row.DicValue }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="DicParentValue" label="父级ID">
                    <template slot-scope="scope">
                        <el-input v-show="scope.row.show" v-model="scope.row.DicParentValue"></el-input>
                        <span v-show="!scope.row.show">{{ scope.row.DicParentValue }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="OrderSort" label="排序值">
                    <template slot-scope="scope">
                        <el-input v-show="scope.row.show" v-model="scope.row.OrderSort"></el-input>
                        <span v-show="!scope.row.show">{{ scope.row.OrderSort }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" label="字典项备注">
                    <template slot-scope="scope">
                        <el-input v-show="scope.row.show" v-model="scope.row.Remark"></el-input>
                        <span v-show="!scope.row.show">{{ scope.row.Remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="IsEnable" label="是否启用">
                    <template slot-scope="scope">
                        <el-switch v-show="scope.row.show" v-model="scope.row.IsEnable" 
                        active-color="#13ce66" inactive-color="#ff4949" 
                        :active-value="0" :inactive-value="1" 
                        active-text="启用" inactive-text="禁用">
                        </el-switch>
                        <span v-show="!scope.row.show">{{ scope.row.IsEnable }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!--保存-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dicDetailVisable = false">取 消</el-button>
                <el-button type="primary" @click="dicDetailVisable = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { InsertDicKey, UpdateDicKey, SoftDeleteDicKey, SearchDicKey, InsertDicValue, UpdateDicValue, SoftDeleteDicValue, SearchDicValue } from '@/api/Dictionary'
export default ({
    data() {
        return {
            keyTable: [],
            Details:[],
            dicForm: {},
            dicDetailVisable: false,
            multipleSelection: []
        }
    },
    methods: {
        //编辑表格事件
        dbRowClick(row, column, event) {
            //获取当前行时第几行
            let index = this.Details.indexOf(row);
            //显示编辑信息
            this.Details.forEach((e, i) => {
                if (i == index) {
                    e.show = true;
                } else {
                    e.show = false;
                }
            })
        },
        //弹出字典详情，查看字典详情信息
        jumpDetail(row) {
            this.dicDetailVisable = true;
            //为字典详情赋值
            this.dicForm = row;
            //查询字典项信息
            SearchDicValue({ key: this.dicForm.Id }).then(res => {
                this.Details = res.Data;
                this.Details.forEach(e => {
                    //这个字段表示是否需要显示编辑的表单控件，true就是显示表单控件，false就是不显示表单控件
                    e.show = false;
                });
            })
        },
        //查询字典主表信息
        getDicKey() {
            SearchDicKey().then(res => {
                this.keyTable = res.Data
            })
        },
        //字典详情多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    created() {
        //初始化字典主表信息
        this.getDicKey();
    }
})
</script>
